<template>
    <div class="app-container">

        <div class="search-container">
            <div class="search-title">
                查询条件
            </div>
            <div class="search-form">
                <div class="form-row">
                    <div class="form-column">
                        <span class="column-title">单位</span>
                        <treeselect class="input-w150" v-model="queryParams.unitCode" :options="deptList" :show-count="true"
                            placeholder="请选择" />
                    </div>
                    <div class="form-column">
                        <span class="column-title">审核状态</span>
                        <el-select class="input-w150" v-model="queryParams.approvalStatus" clearable filterable>
                            <el-option label="待审核" :value="0"></el-option>
                            <el-option label="通过" :value="1"></el-option>
                            <el-option label="未通过" :value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="form-column">
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </div>
                </div>
            </div>
        </div>


        <div class="body-container">
            <div class="operation-bar">
                <div class="bar-title">
                    待审核列表
                </div>
            </div>
            <el-table v-loading="loading" stripe :data="dataList">
                <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>
                <el-table-column label="姓名" prop="personnelName" align="center" min-width="170" />
                <el-table-column label="申请角色" prop="roleName" align="center" min-width="170" />
                <el-table-column label="申请理由" prop="applyReason" align="center" min-width="170" show-overflow-tooltip />
                <el-table-column label="单位" align="center" min-width="200">
                    <div slot-scope="scope">
                        {{ getDeptName(scope.row.unitCode) }}
                    </div>
                </el-table-column>
                <el-table-column label="状态" prop="approvalStatus" align="center" min-width="170">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.approvalStatus === 0">待审核</el-tag>
                        <el-tag type="success" v-if="scope.row.approvalStatus === 1">通过</el-tag>
                        <el-tag type="danger" v-if="scope.row.approvalStatus === 2">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
                    <div class="table-option" slot-scope="scope" v-if="scope.row.roleId !== 1 && scope.row.approvalStatus === 0">
                        <span @click="handleApproveUser(scope.row, 1)" slot="reference">通过</span>
                        <span @click="handleApproveUser(scope.row, 2)" class="danger">驳回</span>
                    </div>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>
  
<script>
import Treeselect from "@riophae/vue-treeselect";
import { approvalUser } from "@/api/talent";
import { selectApplyRoles, approvalApplyRole } from '@/api/role'
import { getDeptName } from "@/utils/ruoyi";
export default {

    data () {
        return {
            ruleForm: {
                approvalReason: '',
                approvalStatus: '',
                id: '',
            },
            visible: false,
            dataList: [],
            loading: true,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                unitCode: undefined,
                approvalStatus: 0
            },
        };
    },
    components: {
        Treeselect
    },
    computed: {
        deptList () {
            return this.$store.state.user.deptTreeList
        },
        deptList2 () {
            return this.$store.state.user.deptList
        },
    },
    created () {
        this.getList();
    },
    methods: {
        getDeptName (id) {
            console.log(this.deptList,id)
            return getDeptName(this.deptList2, id)
        },
        // 确定审核
        confirmForm (ruleForm) {
            this.$refs[ruleForm].validate(validate => {
                if (validate) {
                    this.$confirm('确定当前操作吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        const res = await approvalApplyRole(this.ruleForm)
                        if (res.code === 200) {
                            this.$message.success('审核成功')
                            this.visible = false
                            this.getList()
                        } else {
                            this.$message.error(res.message)
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消审核'
                        });
                    });
                } else {
                    return false;
                }
            })
        },
        // 打开审核弹窗
        async handleApproveUser (row, type) {
            const res = await approvalApplyRole({
                ...row,
                approvalStatus:type
            })
            if (res.code === 200) {
                this.$message.success('成功')
                this.getList()
            } else {
                this.$message.error(res.message)
            }

            // this.ruleForm = {}
            // this.ruleForm.id = row.id
            // this.visible = true
        },
        // 详情
        handleDetail (row) {
            this.$router.push({
                path: 'checkUserList'
            })
        },
        // 查询
        async getList () {
            this.loading = true;
            let params = {
                ...this.queryParams,
            }
            this.queryParams.materialCategoryType = this.tabActive
            const res = await selectApplyRoles(params)
            this.loading = false;
            if (res.code === 200) {
                this.dataList = res.rows || [];
                this.total = res.total || 0;
            } else {
                this.dataList = [];
                this.total = 0;
            }
        },
        // 查询
        handleQuery () {

            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置
        resetQuery () {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                unitCode: undefined,
                approvalStatus: 0
            }
            this.handleQuery();
        }
    }
};
</script>
<style lang="scss" scoped>
.file-name {
    display: flex;
    align-items: center;
    justify-content: center;

    .img-icon {
        width: 20px;
        height: 20px;
    }

    span {
        margin-left: 8px;
    }
}
</style>